<template>
   <div>
      <!-- <section>
         .sync修饰符
         <div @click="updateCount">{{ count }}</div>
      </section> -->

      <section>
         v-model指令在组件上使用：
         <input type="text" v-model="value" @input="updateValue">{{ value }}

         <!-- <input
            type="checkbox"
            v-bind:checked="checked"
            v-on:change="$emit('change', $event.target.checked)"
         > -->
      </section>
   </div>
</template>

<script>
  export default {
      // model:{
      //    prop: 'checked',     仍然需要在props中声明 checked 这个 prop。
      //    event: 'change'
      // },
      props:["bindSync","value", "count"],  //一定要是这个属性，因为父组件那边的v-model默认绑定的属性就是value
      data(){
         return {

         }
      },
      methods:{
         updateCount(){
            this.$emit("update:count", 10000)
         },
         updateValue() {
            this.$emit('update:input', this.value);
            // 如果是下面这种写法的话，就要在父组件中定义一个同名的自定义事件了
            // this.$emit('input', this.value);       
         }
      }
  }
</script>
<style lang='less' scoped>

</style>